:root {
  --bs-font-sans-serif: Arial, system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

/* carousel */
#myCarousel .carousel-inner > .carousel-item > .item-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
}
#myCarousel .carousel-item {
    height: 500px;
    width: 100%;
}
.carousel-item,
.carousel-item.active {
  transition-timing-function: cubic-bezier(.45,.18,0,1);
}
@media (min-width: 768px) {
  .carousel h1 {
      letter-spacing: -3px;
      font-size: 56px;
      font-weight: bold;
  }
}

@media (max-width: 575px) {
  #myCarousel .container {
    width: 100%;
  }
  .hidden-xs {display: none !important}
}

.carousel-control-prev,
.carousel-control-next {
  width: 10%
}

svg.carousel-control-prev-icon,
svg.carousel-control-next-icon {
  fill: currentColor;
  background: none;
  width: 3.5rem;
  height: auto;
}

section {
  margin-bottom: 3rem;
}

h2 {
  margin-top: 3rem;
  letter-spacing: -3px;
  font-size: 56px;
  font-weight: bold;
}

h3:not(.popover-header) {
  font-size: 32px;
  font-weight: bold;
  letter-spacing: -2px;
}

/* smooth scroll */
html {
	scroll-behavior: smooth;
}

/* misc */
.popover .btn-close {line-height: 1;}

/* bg */
.bg-bootstrap { background-color: #563d7c }
.bg-pink { background-color: #E91E63 }
.bg-indigo { background-color: #9c27b0 }
.bg-purple { background-color: #6f42c1; }

ul.flex-column ul {
  flex-direction: column
}

/* code */
code {word-break: normal}
pre[class*="language-"] {margin: 0 0 1rem}

/* sidenav*/
#nav-scrollspy {
  position: sticky;
  top: calc(62px + 0.5rem)
}
#nav-scrollspy-v5 {
  position: sticky;
  top: 0.5rem
}
.nav-stacked ul {
  padding: 0 0 0 1rem;
  display: none
}
[dir="rtl"] .nav-stacked ul {
  padding: 0 1rem 0 0;
}
.nav-stacked li > a.active + ul { display: block }

/* v5 nav */
nav.border-bottom {
  box-shadow: 0 0 1rem rgb(0 0 0 / 15%)
}

/* .nav-stacked li > a { background: #f6f6f6; color: #777 } */
.nav-stacked li > a { color: #777 }

.nav-stacked li + li,
.nav-stacked li > ul { margin-top: 2px }

.nav-stacked > li > a.active { background: #ccc; color: #222 }
.nav-stacked li li > a.active { background: #ddd; color: #333 }
.nav-stacked li li li > a.active { background: #eee; color: #444 }

/* dropdown form */
.form-vertical {
    padding: 10px 10px 5px 10px;
    width: 250px;
}

/* scrollspy example */
.scrollspy-example {
  position: relative; /* required */
  height: 150px; overflow: auto; /* required: height must be px based, and overflow: scroll/auto */
}

.btn-icon {
  height: 20px;
  vertical-align: text-bottom;
  display: inline-block;
}

.btn-lg .btn-icon {
  height: 1.5rem;
}

/* tooltip custom-class */
.tooltip.custom-class .tooltip-inner {
  background: #0e3763
}
.bs-tooltip-top.custom-class .tooltip-arrow::before {
  border-top-color: #0e3763
}
.bs-tooltip-end.custom-class .tooltip-arrow::before,
.bs-tooltip-right.custom-class .tooltip-arrow::before {
  border-right-color: #0e3763
}
.bs-tooltip-start.custom-class .tooltip-arrow::before,
.bs-tooltip-left.custom-class .tooltip-arrow::before {
  border-left-color: #0e3763
}
.bs-tooltip-bottom.custom-class .tooltip-arrow::before {
  border-bottom-color: #0e3763
}

/* popover custom template */
.bs-popover-top.border-dark >.popover-arrow::after,
.bs-popover-top.border-dark >.popover-arrow::before {
  border-bottom-color: #6c757d;
  border-top-color: #6c757d
}

.bs-popover-bottom.border-dark >.popover-arrow::after,
.bs-popover-bottom.border-dark >.popover-arrow::before {
  border-bottom-color: #212529;
  border-top-color: #212529
}

.bs-popover-bottom .popover-header::before {
  border-color: transparent
}

.absolute-img {
  top: calc(50% - 22px);
  right: calc(85px + 1rem);
}

.absolute-svg {
  top: calc(50% - 22px);
  right: 1rem;
}

[dir="rtl"] .absolute-img {
  left: calc(85px + 1rem); right: auto
}
[dir="rtl"] .absolute-svg {
  left: 1rem; right: auto
}

.img-tip-modal,
.svg-tip-modal {
  position: absolute; top: 170px; 
}
.img-tip-modal {right:0}
.svg-tip-modal {right:90px}

[dir="rtl"] .img-tip-modal { right: auto; left: 0 }
[dir="rtl"] .svg-tip-modal { right: auto; left: 90px }